//
//  ContentView.swift
//  DesignCode
//
//  Created by 刘文超 on 2020/5/6.
//  Copyright © 2020 刘文超. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    @State var show = false
    @State var viewSize = CGSize.zero//设置偏移
    @State var showCard = false
    @State var bottomViewSize = CGSize.zero
    @State var isFull = false
    
    var body: some View {
        ZStack{
            
            TopView()
                .offset(x: 0, y: showCard ? -200 : 0)
                .opacity(showCard ? 0.3 : 1)
                .blur(radius:show ? 20 : 0)
                .animation(
                    Animation.default
                    .delay(0.2)
                    .repeatCount(1)
                    .speed(2)
            )
            
            DuiDieView()
                .frame(width:showCard ? 300 : 340, height: 220)
                .background(show ? Color("card3") : Color("card4"))
//                .cornerRadius(20)
                 .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
                .shadow(radius: 20)
                .offset(x: 0, y:show ? -400 :  -40)
                .offset(x: viewSize.width, y: viewSize.height)
                .offset(y:showCard ? -180 :  0)
                .scaleEffect(showCard ? 1 : 0.9)
                .rotationEffect(.init(degrees:show ? 0 :  10))
                .rotationEffect(Angle(degrees:showCard ? -10 : 0))
                .rotation3DEffect(Angle(degrees:showCard ? 0 : 10), axis: (x: 10, y: 0, z: 0))
                .blendMode(.hardLight)
                .animation(.easeInOut(duration: 0.5))
            
            DuiDieView()
                .frame(width: 340, height: 220)
                .background(show ? Color("card4") : Color("card3"))
//                .cornerRadius(20)
                 .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
                .shadow(radius: 20)
                .offset(x: 0, y:show ? -200 :  -20)
                .offset(x: viewSize.width, y: viewSize.height)
                .offset(y:showCard ? -140 :  0)
                .scaleEffect(showCard ? 1 : 0.95)
                .rotationEffect(Angle(degrees:show ? 0 : 5))
                .rotationEffect(Angle(degrees:showCard ? -5 : 0))
                .rotation3DEffect(Angle(degrees:showCard ? 0 : 5.0), axis: (x: 5, y: 0, z: 0))
                .blendMode(.hardLight)
                .animation(.easeInOut(duration: 0.3))
              
            
            CardView()
                .frame(width:showCard ? 375 : 340, height: 220)
                .background(Color.black)
//                .cornerRadius(20)
                .clipShape(RoundedRectangle(cornerRadius: 20, style: .continuous))
                .shadow(radius: 20)
                .offset(x: viewSize.width, y: viewSize.height)
                .offset( y: showCard ? -100 : 0)
                .blendMode(.hardLight)
                .onTapGesture {
                    self.showCard.toggle()
            }
            .animation(.spring(response: 0.3, dampingFraction: 0.6, blendDuration: 0))
            .gesture(
                DragGesture().onChanged{value in
                    self.viewSize = value.translation
                    self.show = true
                }
              .onEnded{value in
                self.viewSize = .zero
                 self.show = false
                }
            )
            
//            Text("************\(bottomViewSize.height)")
//                .offset( y: -300)
            
            bottomView(showAntain: $showCard)
            .offset(x: 0, y:showCard ? 500 : 1000)
                .offset(y: bottomViewSize.height)
            .blur(radius: show ? 20 : 0)
            .animation(.default)
            .gesture(
                DragGesture().onChanged{value in
                     self.bottomViewSize = value.translation
                   if self.isFull {
                        self.bottomViewSize.height  +=  -400
                    }
                    if self.bottomViewSize.height < -400 {
                        self.bottomViewSize.height = -400
                    }
                }
                .onEnded{value in
                    //往下拖是正向的 拖的距离大于50就让状态变成开始状态
                    if self.bottomViewSize.height > 50 {
                        self.showCard = false
                    }
                    //往上拉是负向的，小于-100就把它的高度固定 防止一直拉
                    if (self.bottomViewSize.height < -100 && !self.isFull) || (self.bottomViewSize.height < -250 && self.isFull){
                        self.bottomViewSize.height = -400
                        self.isFull = true
                    }else{
                       self.bottomViewSize = .zero
                        self.isFull = false
                    }
                    
                }
            
            )
            
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

//MARK: 卡片试图组件
struct CardView:View {
    var body:some View{
        
        VStack{
            HStack{
                VStack(alignment: .leading) {
                    Text("UI Design")
                        .font(.title)
                        .fontWeight(.semibold)
                        .foregroundColor(Color.white)
                    Text("Placeholder")
                        .foregroundColor(Color("accent"))
                }
                Spacer()
                Image("Logo1")
                
            }
            .padding(.horizontal,20.0)
            .padding(.top,20.0)
            Spacer()
            Image("Card1")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 300, height: 110, alignment: .top)
        }
     
    }
}

//MARK: 堆叠试图组件
struct DuiDieView:View {
    var body:some View{
        VStack{
            Spacer()
        }
       
    }
}

//MARK:顶部试图组件
struct TopView:View {
    var body: some  View{
        VStack{
            HStack{
                Text("Certificates")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                Spacer()
            }
            .padding()
            Image("Background1")
            Spacer()
            
        }
    }
}

//MARK:底部试图组件
struct bottomView:View {
    
    @Binding var showAntain: Bool
    
    var body:some View{
        VStack(spacing: 20){
            Rectangle()
                .frame(width: 40, height: 5)
                .background(Color.gray)
                .cornerRadius(3)
                .opacity(0.1)
            Text("这才五月中旬，天气就已经热了起来，美女们已经迫不及待的开始换上了她们早就已经准备好的夏装，街上的美腿已经开始晃人眼睛。宁海国际机场出口处。")
                .multilineTextAlignment(.center)
                .font(.subheadline)
                .lineSpacing(4)
            
            HStack (spacing: 12){
                CircleContentView(colorbg: Color.gray, color1:Color.red , color2: Color.blue, width: 60, height: 60, progressValue: 44,showAnimation: $showAntain)
                    .animation(Animation.easeInOut.delay(0.3))
                
                VStack(alignment: .leading, spacing: 4) {
                    Text("SwiftUI")
                        .font(.subheadline)
                        .fontWeight(.semibold)
                    
                   Text("ajjjajajjajaajjjajajjajaajjjajajjajaajjjajajjajaajjjajajjaja")
                        .font(.footnote)
                        .fontWeight(.medium)
                        .foregroundColor(Color.black.opacity(0.4))
                        .lineSpacing(4)
                    
                }
            .padding(20)
            .background(Color.white)
            .cornerRadius(20)
                .shadow(color: Color.black.opacity(0.3), radius: 10, x: 0, y: 5)
                
                
            }
            
            
            Spacer()
        }
        .padding(.top,8)
        .padding(.horizontal,20)
        .frame(maxWidth: .infinity)
        .background(Color.white)
        .cornerRadius(30)
        .shadow(radius: 20)
        
    }
    
}



